<template>
  <div class="container">
    <h1>热门歌单</h1>
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else>
      <ul class="playlist-list">
        <li
          v-for="playlist in playlists"
          :key="playlist.id"
          class="playlist-item"
          @click="selectPlaylist(playlist)"
        >
          {{ playlist.name }}
        </li>
      </ul>

      <div v-if="selectedPlaylist" class="selected-playlist">
        <h2>歌单: {{ selectedPlaylist.name }}</h2>
        <ul class="song-list">
          <li
            v-for="song in songs"
            :key="song.id"
            class="song-item"
          >
            {{ song.name }} - <button @click.stop="playSong(song)">播放</button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onBeforeUnmount } from 'vue';
import axios from 'axios';

interface Playlist {
  id: number;
  name: string;
}

interface Song {
  id: number;
  name: string;
}

export default defineComponent({
  name: 'App',
  data() {
    return {
      playlists: [] as Playlist[],
      selectedPlaylist: null as Playlist | null,
      songs: [] as Song[],
      loading: true,
      currentAudio: null as HTMLAudioElement | null,
    };
  },
  async mounted() {
    try {
      // 获取热门歌单
      const playlistResponse = await axios.get('http://127.0.0.1:3000/top/playlist/highquality');
      this.playlists = playlistResponse.data.playlists;

      // 默认选择第一个歌单
      if (this.playlists.length > 0) {
        this.selectPlaylist(this.playlists[0]);
      }
    } catch (error) {
      console.error('获取歌单失败:', error);
    } finally {
      this.loading = false;
    }
  },
  methods: {
    async selectPlaylist(playlist: Playlist) {
      this.selectedPlaylist = playlist;
      try {
        // 获取该歌单的歌曲列表
        const songResponse = await axios.get(
          `http://127.0.0.1:3000/playlist/track/all?id=${playlist.id}`
        );
        this.songs = songResponse.data.songs;
      } catch (error) {
        console.error('获取歌曲失败:', error);
        this.songs = [];
      }
    },
    async getSongUrl(song: Song): Promise<string> {
      const response = await axios.get(
        `http://127.0.0.1:3000/song/url?id=${song.id}`
      );
      return response.data.data[0].url;
    },
    async playSong(song: Song) {
      console.log('开始播放:', song);

      // 停止当前播放的音频
      if (this.currentAudio) {
        this.currentAudio.pause();
        this.currentAudio = null;
      }

      const url = await this.getSongUrl(song);
      const audio = new Audio(url);

      try {
        await audio.play();
        console.log('开始播放:', song.name);
        this.currentAudio = audio;
      } catch (err) {
        console.error('播放失败:', err);
      }
    },
  },
  beforeUnmount() {
    // 组件卸载时释放音频资源
    if (this.currentAudio) {
      this.currentAudio.pause();
      this.currentAudio = null;
    }
  },
});
</script>

<style scoped>
.container {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.playlist-list {
  list-style-type: none;
  padding-left: 0;
}

.playlist-item {
  cursor: pointer;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.playlist-item:hover {
  background-color: #f0f0f0;
}

.selected-playlist {
  margin-top: 20px;
}

.song-list {
  list-style-type: none;
  padding-left: 0;
}

.song-item {
  margin-bottom: 8px;
}
</style>